<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'绩效名片'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
       <div class="analyItem">
            <p class="analyItemTit tx-center">标准</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">标准</span>
                    <span><span class="fz14 cGreen tx-fb pr8"> {{achieveMentList.length > 0 && achieveMentList[0].hasOwnProperty('greatMore') ? achieveMentList[0].greatMore : '--'}}</span>w</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">奖励</span>
                    <span> <span> {{ achieveMentList.length > 0 && achieveMentList[0].hasOwnProperty('prize') ? achieveMentList[0].prize : '--'}}</span></span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">计量</span>
                    <span> <span class="fz14 cOrange tx-fb pr8">{{ achieveMentList.length > 0  && achieveMentList[0].hasOwnProperty('measure') ? achieveMentList[0].measure : '--'}}</span>w</span>
                </p>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">最低</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">标准</span>
                    <span> <span class="fz14 cRed tx-fb pr8"> {{ achieveMentList.length > 0  && achieveMentList[0].hasOwnProperty('goodMore') ? achieveMentList[0].goodMore : '--'}}</span>w</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">罚款</span>
                    <span> <span> {{ achieveMentList.length > 0  && achieveMentList[0].hasOwnProperty('punish') ? achieveMentList[0].punish : '--'}}</span></span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">计量</span>
                    <span> <span class="fz14 cOrange tx-fb pr8">{{ achieveMentList.length > 0 && achieveMentList[0].hasOwnProperty('measure') ? achieveMentList[0].measure : '--'}}</span>w</span>
                </p>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">实际</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">实际</span>
                    <span> <span class="fz14 cOrange tx-fb pr8" :data-title=" achieveMentList.length > 0 && achieveMentList[0].hasOwnProperty('completionMoney') ? achieveMentList[0].completionMoney : '--'"> {{ achieveMentList.length > 0 && achieveMentList[0].hasOwnProperty('completionMoney') ? achieveMentList[0].completionMoney.toFixed(2) : '--'}}</span>w</span>
                </p>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">撞表</p>
            <div class="analyItemCon">
                <p class="col-md-4" style="height: 28px;">
                    <span class="cLightGray pr8">差额</span>
                    <span> <span class="fz14 cRed tx-fb pr8" :data-title="achieveMentList.length > 0  && achieveMentList[0].hasOwnProperty('resultMoney') ? achieveMentList[0].resultMoney: '--'">{{ achieveMentList.length > 0  && achieveMentList[0].hasOwnProperty('resultMoney') ? achieveMentList[0].resultMoney.toFixed(2) : '--'}}</span>w</span>
                </p>
                <p class="col-md-5">
                    <span class="cLightGray pr8">倒计时</span>
                    <span> <span class="fz14 cGreen tx-fb">{{time}}天</span></span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">状态</span>
                    <span> <span class=" cRed tx-fb"> {{achieveMentList.length > 0  && achieveMentList[0].hasOwnProperty('resultMoney') ? achieveMentList[0].resultMoney > 0 ? '撞表' : '未撞' : '--'}}</span></span>
                </p>
                <p class="col-md-12">
                    <span class="cLightGray pr8">结果</span>
                    <span v-if="achieveMentList.length > 0 && achieveMentList[0].hasOwnProperty('resultMoney') ">
                        <span v-if="achieveMentList[0].resultMoney > 0">
                            <span> {{`已触发奖励标准:{(${achieveMentList[0].completionMoney} - ${achieveMentList[0].greatMore})}/${achieveMentList[0].measure}* ${achieveMentList[0].prize}`}}  <span class="cLightGray pr8">{{ ` {(实际量-标准量)}/计量* 奖励` }}</span>=
                                <span class="fz14 cGreen tx-fb">{{((achieveMentList[0].completionMoney.toFixed(2) - achieveMentList[0].greatMore)/achieveMentList[0].measure * achieveMentList[0].prize).toFixed(2)}}</span>
                            </span>
                        </span>
                        <span v-else>
                            <span> {{`已触发罚款标准:{(${achieveMentList[0].completionMoney.toFixed(2)} - ${achieveMentList[0].goodMore})}/${achieveMentList[0].measure}* ${achieveMentList[0].punish}`}}  <span class="cLightGray pr8">{{ ` {(实际量-最低量)}/计量* 罚款` }}</span>=
                                <span class="fz14 cRed tx-fb">{{((achieveMentList[0].completionMoney - achieveMentList[0].goodMore)/achieveMentList[0].measure * achieveMentList[0].punish).toFixed(2)}}</span>
                            </span>
                        </span>
                    </span>
                    <span v-else>--</span>
                </p>
                <!-- {( 0.00-150)÷10w}*300 = -->
                <!-- <p class="col-md-6">
                    <span  class="cLightGray">{(实际值-标准值)÷10w}*罚</span>
                </p> -->
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">历史</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                </p>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
         <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="clearfix">
                    <div class="clearfix">
                        <p class="col-md-4">
                            <span class="cLightGray pr8">结果</span>
                            <span v-if="achieveMentList.length > 0 && achieveMentList[0].hasOwnProperty('resultMoney') ">
                                <span v-if="achieveMentList.length > 0 && achieveMentList[0].resultMoney > 0">
                                    <span class="fz14 cGreen tx-fb">{{achieveMentList.length > 0 && achieveMentList[0].hasOwnProperty('prizePunish') ? achieveMentList[0].prizePunish.toFixed(2) : '--'}}</span>
                                </span>
                                <span v-else>
                                    <span class="fz14 cRed tx-fb">{{achieveMentList.length > 0 && achieveMentList[0].hasOwnProperty('prizePunish') ? achieveMentList[0].prizePunish.toFixed(2) : '--'}}</span>
                                </span>
                            </span>
                            <span v-else>--</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">距完成目标差</span>
                            <span> <span  class="fz14 cRed tx-fb pr8" :data-title="achieveMentList.length > 0 &&  achieveMentList[0].hasOwnProperty('resultMoney') ? achieveMentList[0].resultMoney : '--'">{{ achieveMentList.length > 0 &&  achieveMentList[0].hasOwnProperty('resultMoney') ? achieveMentList[0].resultMoney.toFixed(2) : '--'}}</span> w</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">状态</span>
                            <span> <span class="cRed tx-fb"> 不同意</span></span>
                        </p>
                    </div>
                    <div class="clearfix">
                        <p class="col-md-4">
                            <span class="cLightGray pr8">执行</span>
                            <span> <span class="cRed tx-fb"> 未到时</span></span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">倒计时</span>
                            <span> <span class="fz14 cGreen tx-fb"> {{time}}天</span></span>
                        </p>
                        <p class="col-md-4"><input type="button" class="uiBtn-normal uiBtn-blue" value="查看历史" @click="clickFourShow(0)"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">通知</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">执行</span>
                    <span >系统</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">时间</span>
                    <span>{{new Date().getFullYear()}}-{{new Date().getMonth() + 1}}-{{new Date(new Date().getMonth(), (new Date().getFullYear() + 1), 0).getDate()}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">执行</span>
                    <span> <span class="cRed tx-fb"> 未到时</span></span>
                </p>
            </div>
        </div>
    </div>
    <!-- 四段渲染容器 -->
    <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
        <rx-history v-if="fourIndex === 0" :key="0"></rx-history>
    </transition-group>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getInvestorRecordDetail, modifyTemplate, getUserManageMonthEvaluation } from '../../Resources/Api'
import rxHistory from './history'


export default {
    data () {
        return {
            achieveMentList: [], // 绩效集合
            time: '', // 倒计时
            fourIndex: -1
        }
    },
    components: {
        rxHistory
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.time = Number(new Date(new Date().getFullYear(), (new Date().getMonth() + 1), 0).getDate()) - Number(new Date().getDate())
        this.getUserManageMonthEvaluation()
    },
    methods: {
        ...mapMutations({
            updatePlate: `SET_UPDATE_PLATE`
        }),
        getInvestorRecordDetail () {
            this.record = ''
            getInvestorRecordDetail({
                pId: this.recordId
            }).then(results => {
                if (results.data.StatusCode === 0) {
                    this.record = results.data.Body
                    if (this.record.gears && this.record.gears.length > 0) {
                        this.record.gears.forEach(element => {
                            if (element.gearMinUnit && element.gearMinUnitPrize) {
                                this.gearMinUnit = element.gearMinUnit
                                this.gearMinUnitPrize = element.gearMinUnitPrize
                            }
                        })
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        addGear () {
            let gear = {
                belongTo: null,
                gear: null,
                gearMinUnit: null,
                delFlag: '0',
                createDate: new Date()
            }
            this.record.gears.unshift(gear)
        },
        removeGear (item) {
            this.record.gears.forEach((element, index) => {
                if (index === item) {
                    element.delFlag = '1'
                }
            })
        },
        submitUpdate () {
            // 提交修改
            let template = {
                id: this.record.templateId,
                performanceName: this.record.performanceName,
                standardNum: this.record.standard,
                unit: this.record.unit,
                gearMinUnit: this.gearMinUnit,
                gearMinUnitPrize: this.gearMinUnitPrize,
                gears: this.record.gears
            }
            modifyTemplate({
                template: JSON.stringify(template)
            }).then(results => {
                if (results.data.StatusCode === 0) {
                    this.iuLayerMsgSuccess('修改成功!')
                    this.getInvestorRecordDetail()
                    // 更新二段
                    this.updatePlate()
                } else {
                    this.iuLayerMsgFail('修改失败')
                }
            }).catch(error => {
                console.log(error)
            })
        },
        editFunction: function (event) {
            $('.editNum').show()
            $('.showNum').hide()
            $('.AddIcon').removeClass('hide')
            $(event.target).hide()
            $(event.target).parent().find('.save_img').show()
            $(event.target).parent().find('.goback_img').show()
            $(event.target).parent().find('.delete_img').hide()
        },
        saveFunction: function (event) {
            $('.editNum').hide()
            $('.showNum').show()
            $('.AddIcon').addClass('hide')
            $(event.target).parent().find('.edit_img').show()
            $(event.target).parent().find('.save_img').hide()
            $(event.target).parent().find('.goback_img').hide()
            $(event.target).parent().find('.delete_img').show()
        },
        gobackFunction: function (event) {
            this.getInvestorRecordDetail()
            $('.editNum').hide()
            $('.showNum').show()
            $('.AddIcon').addClass('hide')
            $(event.target).parent().find('.edit_img').show()
            $(event.target).parent().find('.save_img').hide()
            $(event.target).parent().find('.goback_img').hide()
            $(event.target).parent().find('.delete_img').show()
        },
        // 提交成功
        iuLayerMsgSuccess: function (msg) {
            if (msg == null) {
                layer.msg('提交成功！', {icon: 6, time: 2000})
            } else {
                layer.msg(msg, {icon: 6, time: 2000})
            }
        },
        // 提交失败
        iuLayerMsgFail: function (msg) {
            if (msg == null) {
                layer.msg('提交失败！', {icon: 5, time: 2000})
            } else {
                layer.msg(msg, {icon: 5, time: 2000})
            }
        },
        clickFourShow (index) {
            this.fourIndex = index
        },
        // this.userInfo.card
        getUserManageMonthEvaluation () {
            let parm = {
                diqu: this.leftInfo.u_diqu
            }
            // 获取绩效接口
            getUserManageMonthEvaluation(parm).then((result) => {
                if (result.data.StatusCode === 0) {
                    this.achieveMentList = result.data.Body.allOnJobGCJL
                }
            }).catch((error) => {
                console.log(error)
            })
        }
    },
    watch: {
        $route () {
            this.getUserManageMonthEvaluation()
        }
    }
}
</script>
<style>

.person-img {
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    width: 65px;
    height: 65px;
    display: block;
    margin: 0 auto;
    margin-top: 8px;
}

.SubtractIcon {
    background: url(../../Resources/Static/images/subtracticos.png) no-repeat;
    width: 14px;
    height: 14px;
    display: inline-block;
    background-size: 100%;
    margin-bottom: -2px;
    cursor: pointer;
}
.imgbox{position: absolute;right:10px;top:10px;}
</style>
